'use client'

import { useState } from 'react'

export default function TestAPIPage() {
  const [isLoading, setIsLoading] = useState(false)
  const [result, setResult] = useState<any>(null)
  const [error, setError] = useState<string | null>(null)

  const testStoryGeneration = async () => {
    setIsLoading(true)
    setError(null)
    setResult(null)

    try {
      const response = await fetch('/api/generate-story', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          theme: 'friendship',
          ageGroup: '6-8',
          storyLength: 'medium',
          includeComics: true,
        }),
      })

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`)
      }

      const data = await response.json()
      setResult(data)
      console.log('API响应:', data)
    } catch (err: any) {
      setError(err.message || '测试失败')
      console.error('API测试错误:', err)
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <div className="container mx-auto px-4">
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-8">
            <h1 className="text-3xl font-bold text-gray-900 mb-4">
              API测试页面
            </h1>
            <p className="text-lg text-gray-600">
              测试百度文心一格API和故事生成功能
            </p>
          </div>

          <div className="bg-white rounded-lg shadow-md p-6 mb-6">
            <button
              onClick={testStoryGeneration}
              disabled={isLoading}
              className="w-full bg-blue-600 text-white py-3 px-6 rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {isLoading ? '测试中...' : '测试故事生成API'}
            </button>
          </div>

          {error && (
            <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
              <h3 className="text-red-800 font-semibold mb-2">错误信息</h3>
              <p className="text-red-700">{error}</p>
            </div>
          )}

          {result && (
            <div className="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
              <h3 className="text-green-800 font-semibold mb-2">测试结果</h3>
              <div className="space-y-4">
                <div>
                  <h4 className="font-medium text-green-800">故事标题</h4>
                  <p className="text-green-700">{result.title}</p>
                  <p className="text-green-700">{result.englishTitle}</p>
                </div>
                
                <div>
                  <h4 className="font-medium text-green-800">主插图</h4>
                  {result.illustration && (
                    <img 
                      src={result.illustration} 
                      alt="主插图" 
                      className="max-w-xs rounded-lg"
                    />
                  )}
                </div>

                <div>
                  <h4 className="font-medium text-green-800">卡通漫画</h4>
                  <p className="text-green-700">
                    漫画页面数量: {result.comicPanels?.length || 0}
                  </p>
                  {result.comicPanels && result.comicPanels.length > 0 && (
                    <div className="grid grid-cols-2 gap-4 mt-2">
                      {result.comicPanels.map((panel: any, index: number) => (
                        <div key={panel.id} className="border rounded-lg p-2">
                          <img 
                            src={panel.imageUrl} 
                            alt={`漫画${index + 1}`} 
                            className="w-full h-32 object-cover rounded"
                          />
                          <p className="text-xs mt-1 text-green-700 truncate">
                            {panel.caption}
                          </p>
                        </div>
                      ))}
                    </div>
                  )}
                </div>

                <div>
                  <h4 className="font-medium text-green-800">完整响应</h4>
                  <pre className="bg-gray-100 p-2 rounded text-xs overflow-auto max-h-40">
                    {JSON.stringify(result, null, 2)}
                  </pre>
                </div>
              </div>
            </div>
          )}

          <div className="text-center">
            <a 
              href="/"
              className="inline-flex items-center px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors"
            >
              返回主页
            </a>
          </div>
        </div>
      </div>
    </div>
  )
} 